<template>
  <div class="search">
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="$router.back()"
        @focus="showSearch"
        @input="timeSearch"
      />
    </form>
    <!-- 实时搜索 -->
    <ul v-if="showNow" class="nowSearch">
      <li v-for="(item, index) in timeArr" :key="index" @click="onSearch(item)">
        {{ item }}
      </li>
    </ul>
    <!-- 即时搜索面板 -->
    <div class="timeHistory" v-if="show == true" @click.prevent="noShow">
      <div class="box" v-if="isHistory">
        <h3>历史搜索</h3>
        <span
          v-for="(item, index) in history"
          :key="index"
          @click="onSearch(item)"
          >{{ item }}</span
        >
        <van-icon name="delete-o" @click="delHistory" />
      </div>
      <div class="box active">
        <h3>热门搜索</h3>
        <span
          v-for="(item, index) in hot"
          :key="index"
          @click="onSearch(item.keyword)"
          >{{ item.keyword }}</span
        >
      </div>
    </div>
    <!-- 下拉菜单 -->
    <div v-else>
      <DropdownMenu
        :kindArr="kindArr"
        @changeKind="changeKind"
        @changePrice="changePrice"
      >
      </DropdownMenu>
      <!-- 数据列表 -->
      <GoodsList v-if="listArr.length != 0" :listArr="listArr"></GoodsList>
      <p v-else>没有搜索到相关商品嗷，试试换个关键词吧！！！</p>
    </div>
  </div>
</template>

<script>
// 引入下拉菜单
import DropdownMenu from "@/components/DropdownMenu.vue";
import GoodsList from "@/components/GoodsList.vue";
import {
  getGoodsListDate,
  getSearchIndexDate,
  getClearHistoryDate,
  getSearchHelperDate,
} from "@/utils/http";
export default {
  name: "Search",
  // eslint-disable-next-line vue/no-unused-components
  components: {
    DropdownMenu,
    GoodsList,
    getClearHistoryDate,
    getSearchHelperDate,
  },
  data() {
    return {
      value: "", // key关键字
      listArr: [], //数据列表
      order: "desc", //价格排序
      categoryId: "0", //类别居家id
      kindArr: [], // 类别数组
      sort: "id", //排序方式
      show: false, //显示即时搜索
      history: [], //历史搜索记录
      hot: [], //热门搜索
      isHistory: true, //显示历史记录
      timeArr: [], //实时搜索数组
      showNow: true, //显示实时搜索
    };
  },
  created() {
    this.getList();
    // 获取历史和热门搜索的数据
    this.getHistorySearch();
  },
  methods: {
    // 获取商品列表数据
    // 获取数据列表的参数
    getList() {
      let obj = {
        keyword: this.value,
        order: this.order, //价格排序
        categoryId: this.categoryId, //类别居家id
        sort: this.sort,
      };
      getGoodsListDate(obj).then((res) => {
        this.listArr = res.data.data;
        // 将name=>text id=>value
        res.data.filterCategory.forEach((item) => {
          item.text = item.name;
          item.value = item.id;
        });
        this.kindArr = res.data.filterCategory;
      });
    },
    // 点击搜索
    onSearch(val) {
      this.value = val;
      this.getList();
      this.showNow = false;
      this.show = false;
    },
    // 价格排序
    changePrice(val) {
      this.order = val;
      this.sort = "price";
      // 重新调用数据
      this.getList();
    },
    // 类别排序
    changeKind(val) {
      this.categoryId = val;
      this.sort = "id";
      // 重新调用数据
      this.getList();
    },
    // 获取历史和热门搜索的数据
    getHistorySearch() {
      getSearchIndexDate().then((res) => {
        this.history = res.data.historyKeywordList;
        this.hot = res.data.hotKeywordList;
      });
    },
    // 获取焦点，显示即时搜索
    showSearch() {
      // 输入框没内容
      if (!this.value) {
        this.show = true;
        this.noShow = false;
      } else {
        this.show = false;
        this.noShow = true;
      }
    },
    // 失去焦点隐藏
    noShow() {
      this.show = false;
    },
    // 实时搜索
    timeSearch() {
      // 请求实时搜索数据
      this.noShow = true;
      this.show = false;
      getSearchHelperDate({ keyword: this.value }).then((res) => {
        if (!res.errno) {
          this.timeArr = res.data;
          console.log(res.data);
        }
      });
    },
    // 删除历史搜索
    delHistory() {
      // 请求删除历史搜索
      getClearHistoryDate().then((res) => {
        if (!res.errno) {
          this.$toast("历史记录删除成功");
          this.isHistory = false;
          this.show = true;
        }
      });
    },
  },
};
</script>

<style scope lang='less'>
.timeHistory {
  height: 100%;
  background: #aaa;
  position: absolute;
  z-index: 100;
  width: 100%;
  .box {
    background: white;
    border-bottom: 1px solid #ccc;
    padding: 20px 10px;
    h3 {
      display: block;
      font-size: 18px;
      margin-bottom: 5px;
    }
    span {
      border: 1px solid rgb(146, 144, 144);
      color: rgb(146, 144, 144);
      font-size: 12px;
      padding: 5px;
      margin: 5px 3px 5px 0;
      border-radius: 3px;
    }
    .van-icon {
      position: absolute;
      top: 10px;
      right: 20px;
    }
  }
  .active {
    span:nth-of-type(1) {
      border: 1px solid red;
      color: red;
    }
  }
}
.nowSearch {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 100;
  width: 100%;
  background: #aaa;
  li {
    text-align: left;
    padding: 10px;
    background: white;
    width: 100%;
  }
  li:hover {
    background: rgb(238, 235, 235);
  }
}
</style>